<template>
    <div class="page-main DataEntry">
        <MyDialog :model-value="true" :type="DialogType.C1" :title="title" @close="onClose" top="6%" append-to-body>
            <DataTable ref="DataEntryTableRef" :data="list" :hasTop="isChange" :hasAdd="false" :hasFilter="false" :hasSearch="false" :hasCheckbox="false" :hasPager="false" v-bind="$attrs" divHeight="calc(100vh - 300px)">
                <vxe-column title="位置">
                    <template #default="{ row }">
                        <InputNumber v-model="row.position" :precision="2" append="m" maxlength="50" :disabled="!isChange"></InputNumber>
                    </template>
                </vxe-column>

                <vxe-column title="断丝数" v-if="type == 1">
                    <template #default="{ row }">
                        <InputNumber v-model="row.num" :precision="0" maxlength="50" :disabled="!isChange"></InputNumber>
                    </template>
                </vxe-column>

                <vxe-column title="测量值" v-if="type == 2">
                    <template #default="{ row }">
                        <InputNumber v-model="row.num" :precision="2" append="mm" maxlength="50" :disabled="!isChange"></InputNumber>
                    </template>
                </vxe-column>

                <vxe-column title="操作" width="100" v-if="isChange">
                    <template #default="{ row, rowIndex }">
                        <el-button type="danger" @click="onDelete(row, rowIndex)">删除</el-button>
                    </template>
                </vxe-column>

                <!-- 顶部右侧按钮 -->
                <template #rightBtn v-if="isChange">
                    <el-button-group>
                        <el-button v-if="true" type="primary" @click="onAdd">添加</el-button>
                    </el-button-group>
                </template>
            </DataTable>
            <template #footer>
                <!-- <el-button type="primary" @click="onSave" v-if="isChange">提交</el-button> -->
            </template>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import { DialogType } from "@/_gx/TsEnums";

/********************************************** 接收参数 **********************************************/

const props = defineProps({
    //是否为选择组件，在此组件用做弹框选择的子组件时传true
    isChange: {
        type: Boolean,
        default: false,
    },
});

/********************************************** 列表相关定义 **********************************************/

//表格的数据
const list = ref([]);
const title = ref();
const type = ref();

//初始化
const InitDataEntry = (name, dataList, dataType) => {
    let str = dataType == 1 ? "断丝" : "直径";
    title.value = str + "数据录入 - " + name;
    list.value = dataList;
    type.value = dataType;
};

//分页方法
const onAdd = () => {
    list.value.push({
        type: type.value,
        position: null,
        num: null,
    });
};

/********************************************** 列表按钮功能 **********************************************/

//删除
const onDelete = (row, index) => {
    list.value.splice(index, 1);
};

//关闭
const onClose = () => {
    emits("close", false);
};

const emits = defineEmits(["close"]);
defineExpose({ InitDataEntry });
</script>
